<template>
    <p>{{state.count}}</p>
    <button @click="add">add</button>
    <p>{{state.message}}</p>
    <button @click="changeRawMessage">changeRawMessage</button>
</template>
<script setup>
import {ref,reactive,toRaw} from 'vue';
//state是一个响应式对象
const rawState = {
    count:0,
    message:'hello'
};
const state = reactive(rawState)

const add = ()=>state.count++;
const changeRawMessage = ()=>{
    const rawState = toRaw(state);
    console.log(rawState);
    //尽管我们修改的原生对象，但是代理对象其实引用的或者说访问的还是这个原生对象
    //如果修改了原生对象之后，其实代理对象中的值也发生了变化，只不过因为原生不是响应式的，
    //所以界面没有更新
    rawState.message = 'world';
    console.log('rawState',rawState);
    console.log('state',state)
    state.count++;
}
//什么时候需要用到toRaw
//因为在Vue里，访问响应式对象的属性其实成本是比较高。
//如果你不想走响应式的逻辑，或者不需要走响应式的逻辑，就可以把它转成一原生对象进行操作
let count = state.count;
for(let i=0;i<10000;i++){
    console.log(count)
}
</script>